<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="node_modules/@fortawesome/fontawesome-free/css/all.min.css"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <title>Blog</title>
  </head>
  <body>
    <div class="wrapper">
      <header class="purple">
        <nav class="navbar wrapper_content">
          <div class="navbar_title">
            <div class="navbar_logo">
              <i class="fas fa-book-open"></i>
            </div>

            <div class="navbar_brand">
              <a class="navbar_brand_link" href="#">Blog</a>
            </div>
          </div>

          <div class="navbar_menu">
            <div class="navbar_link">
              <a href="index.html">Home</a>
            </div>
            <div class="navbar_link">
              <a href="show_categories.html">Category1</a>
            </div>
            <div class="navbar_link">
              <a href="show_tags.html">Category2</a>
            </div>
            <div class="navbar_link">
              <a href="show_posts.html">Category3</a>
            </div>
            <form class="navbar_form_search">
              <input
                class="form_search_input"
                type="text"
                placeholder="Search"
              />
              <button class="btn btn_search" type="submit">Search</button>
            </form>
            <div class="navbar_enter">
              <div class="navbar_login">
                LogIn/RegIn <i class="fas fa-sign-in-alt"></i>
              </div>
              <div class="navbar_logout">
                LogOut <i class="fas fa-door-open"></i>
              </div>
            </div>
          </div>
          <div class="navbar_burger">
            <i class="fas fa-bars"></i>
          </div>
        </nav>
      </header>
      <main>
        <div class="lent_title wrapper_content">
          <h1>New posts</h1>
        </div>

        <div class="lent wrapper_content">
          <div class="lent_post">
            <div class="post_image">
              <img src="src/image/food01.jpg" alt="" />
            </div>
            <div class="post_title">
              <a href="article.html"> Post title 1 </a>
            </div>
            <div class="post_description">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum
              quibusdam ipsam pariatur sequi officiis minima voluptates nobis
              maxime ipsa reprehenderit!
            </div>
          </div>
          <div class="lent_post">
            <div class="post_image">
              <img src="src/image/food02.jpg" alt="" />
            </div>
            <div class="post_title">
              <a href=""> Post title 2 </a>
            </div>
            <div class="post_description">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
          </div>
          <div class="lent_post">
            <div class="post_image">
              <img src="src/image/food03.jpg" alt="" />
            </div>
            <div class="post_title">
              <a href=""> Post title 3 </a>
            </div>
            <div class="post_description">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
          </div>
          <div class="lent_post">
            <div class="post_image">
              <img src="src/image/food04.jpg" alt="" />
            </div>
            <div class="post_title">
              <a href=""> Post title 4 </a>
            </div>
            <div class="post_description">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
          </div>
          <div class="lent_post">
            <div class="post_image">
              <img src="src/image/food05.jpg" alt="" />
            </div>
            <div class="post_title">
              <a href=""> Post title 5 </a>
            </div>
            <div class="post_description">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
          </div>
          <div class="lent_post">
            <div class="post_image">
              <img src="src/image/food06.jpg" alt="" />
            </div>
            <div class="post_title">
              <a href=""> Post title 6 </a>
            </div>
            <div class="post_description">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
            </div>
          </div>
        </div>

        <div class="lent_title wrapper_content">
          <h1>Popular posts</h1>
        </div>

        <!-- Slider popular posts -->
        <div
          class="itc-slider wrapper_content"
          data-slider="itc-slider"
          data-loop="true"
          data-autoplay="true"
          data-interval="4000"
        >
          <div class="itc-slider-wrapper">
            <div class="itc-slider-items">
              <div class="itc-slider-item">
                <img src="src/image/food14.jpg" alt="" />
                <div class="itc-slider-content">
                  <div class="itc-slider-title">Post title 1</div>
                  <div class="itc-slider-description">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Reprehenderit assumenda voluptate consequuntur sapiente iure
                    libero?Lorem ipsum dolor sit amet consectetur adipisicing
                    elit. Reprehenderit assumenda voluptate consequuntur
                    sapiente iure libero?
                  </div>
                </div>
              </div>
              <div class="itc-slider-item">
                <img src="src/image/food13.jpg" alt="" />
                <div class="itc-slider-content">
                  <div class="itc-slider-title">Post title 2</div>
                  <div class="itc-slider-description">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Reprehenderit assumenda voluptate consequuntur sapiente iure
                    libero?Lorem ipsum dolor sit amet consectetur adipisicing
                    elit. Reprehenderit assumenda voluptate consequuntur
                    sapiente iure libero?
                  </div>
                </div>
              </div>
              <div class="itc-slider-item">
                <img src="src/image/food12.jpg" alt="" />
                <div class="itc-slider-content">
                  <div class="itc-slider-title">Post title 3</div>
                  <div class="itc-slider-description">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Reprehenderit assumenda voluptate consequuntur sapiente iure
                    libero?Lorem ipsum dolor sit amet consectetur adipisicing
                    elit. Reprehenderit assumenda voluptate consequuntur
                    sapiente iure libero?
                  </div>
                </div>
              </div>
              <div class="itc-slider-item">
                <img src="src/image/food11.jpg" alt="" />
                <div class="itc-slider-content">
                  <div class="itc-slider-title">Post title 4</div>
                  <div class="itc-slider-description">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Reprehenderit assumenda voluptate consequuntur sapiente iure
                    libero?Lorem ipsum dolor sit amet consectetur adipisicing
                    elit. Reprehenderit assumenda voluptate consequuntur
                    sapiente iure libero?
                  </div>
                </div>
              </div>
              <div class="itc-slider-item">
                <img src="src/image/food10.jpg" alt="" />
                <div class="itc-slider-content">
                  <div class="itc-slider-title">Post title 5</div>
                  <div class="itc-slider-description">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Reprehenderit assumenda voluptate consequuntur sapiente iure
                    libero?Lorem ipsum dolor sit amet consectetur adipisicing
                    elit. Reprehenderit assumenda voluptate consequuntur
                    sapiente iure libero?
                  </div>
                </div>
              </div>
              <div class="itc-slider-item">
                <img src="src/image/food09.jpg" alt="" />
                <div class="itc-slider-content">
                  <div class="itc-slider-title">Post title 6</div>
                  <div class="itc-slider-description">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit.
                    Reprehenderit assumenda voluptate consequuntur sapiente iure
                    libero?Lorem ipsum dolor sit amet consectetur adipisicing
                    elit. Reprehenderit assumenda voluptate consequuntur
                    sapiente iure libero?
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Кнопки для перехода к предыдущему и следующему слайду -->
          <button class="itc-slider-btn itc-slider-btn-prev"></button>
          <button class="itc-slider-btn itc-slider-btn-next"></button>
        </div>
        <!-- end slider popular posts -->
      </main>
      <footer class="purple">
        <div class="footer_content wrapper_content">
          Created by Soloviev NV in 2023, all rights reserved.
          <div class="footer_social_icon">
            <i class="fab fa-instagram-square"></i>
            <i class="fab fa-facebook-square"></i>
            <i class="fab fa-google-plus-square"></i>
            <i class="fab fa-twitter-square"></i>
          </div>
        </div>
      </footer>
    </div>

    <script src="js/itc-slider.js" defer></script>
  </body>
</html>
